<template>
  <div class="discussion-list">
    <div class="discussion-header">
      <h1>服饰文化讨论区</h1>
      <a-button type="primary" @click="createDiscussion">发起讨论</a-button>
    </div>

    <div class="discussion-content">
      <a-list
        :data-source="discussionList"
        :loading="loading"
        item-layout="vertical"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            <template #extra>
              <div class="discussion-stats">
                <span><eye-outlined /> {{ item.viewCount }}</span>
                <span><like-outlined /> {{ item.likeCount }}</span>
                <span><message-outlined /> {{ item.commentCount }}</span>
              </div>
            </template>
            <a-list-item-meta>
              <template #title>
                <router-link
                  :to="`/culture/discussion/${item.id}`"
                  class="discussion-title"
                >
                  {{ item.title }}
                </router-link>
              </template>
              <template #description>
                <div class="discussion-info">
                  <span>发布于 {{ formatDate(item.createTime) }}</span>
                </div>
              </template>
            </a-list-item-meta>
            <div class="discussion-preview">{{ item.content }}</div>
          </a-list-item>
        </template>
      </a-list>

      <div class="pagination-container">
        <a-pagination
          v-model:current="currentPage"
          :total="total"
          :pageSize="pageSize"
          show-quick-jumper
          @change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import {
  EyeOutlined,
  LikeOutlined,
  MessageOutlined,
} from "@ant-design/icons-vue";
import { listDiscussionByPageUsingGet } from "@/api/culturePartDiscussionController";

const router = useRouter();
const loading = ref(false);
const discussionList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const loadDiscussions = async () => {
  loading.value = true;
  try {
    const res = await listDiscussionByPageUsingGet({
      current: currentPage.value.toString(),
      pageSize: pageSize.value.toString(),
    });
    if (res.data?.code === 0) {
      discussionList.value = res.data.data.records;
      total.value = parseInt(res.data.data.total);
    } else {
      message.error("获取讨论列表失败");
    }
  } catch (error) {
    message.error("获取讨论列表失败");
  } finally {
    loading.value = false;
  }
};

const handlePageChange = (page: number) => {
  currentPage.value = page;
  loadDiscussions();
};

const createDiscussion = () => {
  router.push("/culture/discussion/create");
};

const formatDate = (dateStr: string) => {
  const date = new Date(dateStr);
  return date.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });
};

onMounted(() => {
  loadDiscussions();
});
</script>

<style scoped>
.discussion-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.discussion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.discussion-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.discussion-content {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.discussion-title {
  font-size: 18px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
}

.discussion-title:hover {
  color: #1890ff;
}

.discussion-info {
  color: #8c8c8c;
  font-size: 14px;
}

.discussion-preview {
  color: #595959;
  margin-top: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discussion-stats {
  display: flex;
  gap: 16px;
  color: #8c8c8c;
}

.discussion-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

:deep(.ant-list-item) {
  padding: 20px 0;
}

:deep(.ant-list-item-meta-title) {
  margin-bottom: 8px;
}
</style>
